'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import Image from 'next/image'
import { BellOutlined } from '@ant-design/icons'
import styles from './header.module.css'

const linkData = [
  { name: '首页', path: '/dashboard' },
  { name: '场景智能体', path: '/scan-agent' },
  { name: 'AI助手', path: '/ai-helper' },
  { name: '关于', path: '/about' },
]

const Header = () => {
  const pathName = usePathname()
  const hideHeader = ['/signin', '/register', '/account'].includes(pathName)

  if (hideHeader) return null
  
  return (
    <header className={styles.header}>
      <div className={styles.headerContent}>
          <div className={styles.logoSection}>
            <Link href="/dashboard" className={styles.logoLink}>
              <Image
                src="/logo.png"
                alt="MOGO AI"
                width={32}
                height={32}
                className={styles.logoImage}
              />
              <span className={styles.logoText}>MOGO AI交管</span>
            </Link>
          </div>

          <nav className={styles.navigation}>
            {linkData.map(link => (
              <Link
                key={link.path}
                className={`${styles.navLink} ${
                  pathName === link.path ? styles.activeLink : ''
                }`}
                href={link.path}
              >
                {link.name}
              </Link>
            ))}
          </nav>
          <div className={styles.toolbar}>
            <button className={styles.notificationBtn}>
              <BellOutlined style={{ fontSize: '20px' }} />
            </button>
            <div className={styles.userSection}>
              <div className={styles.avatarContainer}>
                <Image
                  src="/avatar-placeholder.png"
                  alt="User Avatar"
                  width={32}
                  height={32}
                />
              </div>
              <span className={styles.userName}>交管用户</span>
            </div>
          </div>
      </div>
    </header>
  )
}

export default Header
